﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/首页.css">
    <script src="./js/flexible.js"></script>
    <script src="./js/better-scroll.min.js"></script>
</head>

<body>
    <div class="header">
        <h1>奈商城</h1>
    </div>
    <div class="search">
        <img src="./images/search.png" id="search">
        <input type="search" placeholder="输入您要搜索的宝贝..">
        <img src="./images/xinxi.png" id="xinxi">
    </div>
    <div class="bannerBox">
        <div class="bannerCon">
            <ul class="dispfx">
                <li><img src="./images/banner2.jpg" alt=""></li>
                <li><img src="./images/banner2.jpg" alt=""></li>
                <li><img src="./images/banner2.jpg" alt=""></li>
            </ul>
        </div>
        <div class="bannerIndicator">
            <ul class="dian">
                <li class="on"></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div class="fenlei">
        <ul>
            <li>
                <img src="images/home-cat1.png" id="fl-img1">
                <div>菲茨</div>
            </li>
            <li>
                <img src="images/home-cat2.png" id="fl-img2">
                <div>克奈圃</div>
            </li>
            <li>
                <img src="images/home-cat3.png" id="fl-img3">
                <div>服装</div>
            </li>
            <li>
                <img src="images/home-cat4.png" id="fl-img4">
                <div>其他</div>
            </li>
        </ul>
    </div>
    <div class="hui"></div>
    <div class="tuijian">
        <div class="tj-hd">
            <img src="./images/推荐.png">
        </div>
        <div class="shangpin">
            <ul>
                <li>
                    <div class="img img1">
                        <img src="./images/home-new.png" class="new">
                    </div>
                    <div class="txt">
                        莫次有机PWE活性美白洗面奶
                    </div>
                    <div class="jiage">
                        ￥169 <s>￥220</s>
                    </div>
                </li>
                <li>
                    <div class="img img2">
                        <img src="./images/home-promotion.png" class="new">
                    </div>
                    <div class="txt">
                        莫次有机PWE活性美白嫩肤霜
                    </div>
                    <div class="jiage">
                        ￥169 <s>￥220</s>
                    </div>
                </li>
                <li>
                    <div class="img img1">
                        <img src="./images/home-new.png" class="new">
                    </div>
                    <div class="txt">
                        莫次有机PWE活性美白洗面奶
                    </div>
                    <div class="jiage">
                        ￥169 <s>￥220</s>
                    </div>
                </li>
                <li>
                    <div class="img img2">
                        <img src="./images/home-promotion.png" class="new">
                    </div>
                    <div class="txt">
                        莫次有机PWE活性美白嫩肤霜
                    </div>
                    <div class="jiage">
                        ￥169 <s>￥220</s>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <ul>
            <li>
                <img src="./images/10.svg">
                <div class="blue">首页</div>
            </li>
            <li>
                <img src="./images/2.svg">
                <div>购物车</div>
            </li>
            <li>
                <img src="./images/3.svg">
                <div>我的</div>
            </li>
        </ul>
    </div>
</body>
<script>
    // 轮播图
    var bs = BetterScroll.createBScroll(".bannerCon", {
        // ① 开启横向滚动，禁止纵向滚动
        scrollX: true,
        scrollY: false,
        // ② 保留轮播图上，纵向的原生滚动
        eventPassthrough: true,
        // ③ 开启轮播
        slide: {
            loop: true,
            threshold: 0.1,
            speed: 400,
            listenFlick: true,
            autoplay: false,
            interval: 3000
        },
        // 设置为false,解决轮播快速切换时的闪烁问题
        momentum: false,
        // 当loop为true时，设置此项为false,可以解决拖动过快产生空白的问题
        bounce: false
    });
    bs.on('scrollEnd', () => {
        var lis = document.querySelectorAll('.bannerIndicator li');
        var page = bs.getCurrentPage().pageX;
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = '';
        }
        lis[page].className = 'on';
    });
    // 底部高亮切换
    var lis = document.querySelectorAll(".footer ul li");

    for (var i = 0; i < lis.length; i++) {
        forer(i)
    }

    function forer(i) {
        lis[i].onclick = function() {
            var src = lis[i].children[0].getAttribute("src"); //获取相对位置
            var index = src.lastIndexOf("/") + 2; //获取索引
            var src0 = decodeURI(src.substring(0, index)); //裁剪
            var src1 = src0 + "0.svg"; //拼接

            for (var j = 0; j < lis.length; j++) { //重置所有属性
                var srcn = lis[j].children[0].getAttribute("src");
                var index2 = srcn.lastIndexOf("/") + 2;
                var src2 = decodeURI(srcn.substring(0, index2));
                var src3 = src2 + ".svg";
                lis[j].children[0].setAttribute('src', src3);
                lis[j].children[1].className = '';
            }
            lis[i].children[0].setAttribute('src', src1); //修改src相对路径
            lis[i].children[1].className = 'blue'; //修改文字颜色
        }
    }
    // 跳转
    var ipt = document.querySelector('.search input');
    ipt.onclick = function() {
        location.href = "./商品分类列表.html";
    }
    var lis2 = document.querySelectorAll('.fenlei li');
    for (var i = 0; i < lis2.length; i++) {
        lis2[i].onclick = function() {
            location.href = "./商品分类列表.html";
        }
    }
    var lis3 = document.querySelectorAll('.shangpin li');
    for (var i = 0; i < lis3.length; i++) {
        lis3[i].onclick = function() {
            location.href = "./商品详情-详情.html";
        }
    }
</script>

</html>